/*
 * @Date: 2022-05-16 12:25:33
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-05-16 14:55:53
 * @FilePath: \react-lvyou\src\views\Register\RegisterForm.tsx
 * @Description: something
 */
import React, { memo } from "react";
import { validateCheakEmail, validateVPassword } from "@/utils/validate";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Card, Checkbox, Form, Input, message } from "antd";
import { Link, useNavigate } from "react-router-dom";
import axios from "axios";
const RegisterForm = memo(() => {
  const navigate = useNavigate();
  //验证成功
  const onFinish = (values) => {
    userRegister(values);
  };
  // 验证失败
  const onFinishFailed = ({ values, errorFields, outOfDate }) => {
    console.log(values);
    message.error({
      content: "请填写符合格式的信息",
    });
  };
  //接口请求
  const userRegister = async (values: {
    username: string;
    password: string;
    confirmPassword: string;
  }) => {
    try {
      await axios.post("http://123.56.149.216:8089/auth/register", {
        email: values.username,
        password: JSON.stringify(values.password),
        confirmPassword: JSON.stringify(values.confirmPassword),
      });
      navigate("/login");
    } catch (error: any) {
      console.log(error.message);
      message.error({
        content: "出错了~",
      });
    }
  };
  return (
    <>
      <Card style={{ width: 300 }}>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            name="username"
            rules={[
              { required: true, message: "请输入邮箱!" },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!validateCheakEmail(value)) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("请输入正确邮箱格式"));
                },
              }),
            ]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="用户名"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              { required: true, message: "请输入密码！" },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!validateVPassword(value)) {
                    return Promise.resolve();
                  }
                  return Promise.reject(
                    new Error("6-20位，包含大小写字母和数字!"),
                  );
                },
              }),
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="密码"
            />
          </Form.Item>
          <Form.Item
            name="confirmPassword"
            rules={[
              { required: true, message: "请输入确认密码！" },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (getFieldValue("password") === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("两次输入密码不一致！"));
                },
              }),
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="确认密码"
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              注册
            </Button>

            <div>
              或 <Link to="/login">去登录</Link>
            </div>
          </Form.Item>
        </Form>
      </Card>
    </>
  );
});

export default RegisterForm;
